<template>
	<view class="home-container">
		<!-- 加载状态 -->
		<view v-if="loading" class="loading-container">
			<uni-load-more status="loading"></uni-load-more>
		</view>

		<!-- 无车辆时的提示 -->
		<view v-else-if="!currentCar" class="empty-car">
			<image src="/static/add-car.png" class="empty-image"></image>
			<text class="empty-text">您还没有添加爱车</text>
			<button class="add-car-btn" @click="goToAddCar">去添加爱车</button>
		</view>

		<!-- 有车辆时的展示 -->
		<view v-else>
			<!-- 车辆信息卡片 -->
			<view class="car-card">
				<view class="car-header">
					<text class="car-name">{{ currentCar.brand }} {{ currentCar.model }}</text>
					<text class="car-plate">{{ currentCar.licensePlate }}</text>
					<view class="car-actions">
						<uni-icons type="compose" size="24" color="#7fbc8d" @click="goToAddCar"></uni-icons>
					</view>
				</view>

				<view class="car-stats">
					<view class="stat-item">
						<text class="stat-value">{{ currentMileage || '--' }}</text>
						<text class="stat-label">当前里程(km)</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">{{ avgConsumption || '--' }}</text>
						<text class="stat-label">平均油耗(L/100km)</text>
					</view>
				</view>
			</view>

			<!-- 最近加油记录 -->
			<view class="recent-record" v-if="latestRecord">
				<view class="section-header">
					<text class="section-title">最近加油记录</text>
					<text class="section-action" @click="viewAllRecords">查看全部</text>
				</view>
				<view class="record-details">
					<view class="detail-item">
						<text class="detail-label">日期：</text>
						<text class="detail-value">{{ formatDate(latestRecord.refuelDate) }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">加油量：</text>
						<text class="detail-value">{{ latestRecord.oilVolume }}L</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">金额：</text>
						<text class="detail-value">¥{{ latestRecord.amount }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">油价：</text>
						<text class="detail-value">¥{{ latestRecord.oilPrice }}/L</text>
					</view>
				</view>
			</view>
			<view v-else class="no-record">
				<text>暂无加油记录</text>
			</view>

			<!-- 油耗统计卡片 -->
			<view class="stats-card">
				<view class="section-header">
					<text class="section-title">油耗统计</text>
					<text class="section-action" @click="viewStatistics">详细统计</text>
				</view>
				<view class="stats-grid">
					<view class="stat-block">
						<text class="stat-number">{{ currentMonthOil || '--' }}</text>
						<text class="stat-desc">本月油耗(L)</text>
					</view>
					<view class="stat-block">
						<text class="stat-number">{{ currentMonthAmount || '--' }}</text>
						<text class="stat-desc">本月油费(元)</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 添加油耗按钮 -->
		<view v-if="currentCar" class="add-record-btn" @click="goToAddRecord">
			<uni-icons type="plus" size="24" color="#fff"></uni-icons>
			<text>添加油耗</text>
		</view>
	</view>
</template>

<script>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	import dayjs from 'dayjs'
	import {
		getCurrentInstance
	} from 'vue'
	export default {
		setup() {
			const store = useStore()
			const loading = ref(true)
			const currentCar = ref(null)
			const latestRecord = ref(null)
			const error = ref(null)
			const currentMileage = ref('--')
			const avgConsumption = ref('--')
			const currentMonthAmount = ref('--')
			const currentMonthOil = ref('--')

			const {
				proxy
			} = getCurrentInstance()

			// 从接口获取车辆信息
			const fetchCarInfo = async () => {

				try {
					loading.value = true
					const res = await proxy.$api.getIndexInfo()

					if (res.code === 200) {
						currentCar.value = res.data.carInfo
						latestRecord.value = res.data.latestRecord
						avgConsumption.value = res.data.avgConsumption
						currentMileage.value = res.data.currentMileage
						currentMonthAmount.value = res.data.currentMonthAmount
						currentMonthOil.value = res.data.currentMonthOil
						// 更新Vuex中的车辆信息
						store.commit('SET_CURRENT_CAR', res.data.carInfo)
					} else {
						throw new Error(res.message || '获取车辆信息失败')
					}
				} catch (err) {
					error.value = err.message
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
				} finally {
					loading.value = false
				}

			}

			// 格式化日期
			const formatDate = (date) => {
				return date ? dayjs(date).format('YYYY-MM-DD') : '--'
			}

			// 页面跳转方法
			const goToAddCar = () => uni.navigateTo({
				url: '/pages/car/car'
			})
			const goToAddRecord = () => uni.navigateTo({
				url: `/pages/record/add`
			})
			const viewAllRecords = () => uni.navigateTo({
				url: '/pages/record/list'
			})
			const viewStatistics = () => uni.switchTab({
				url: '/pages/cost/index'
			})

			// 初始化数据
			onMounted(() => {
				fetchCarInfo()
			})

			return {
				loading,
				currentCar,
				latestRecord,
				avgConsumption,
				currentMileage,
				error,
				formatDate,
				goToAddCar,
				goToAddRecord,
				viewAllRecords,
				viewStatistics,
				currentMonthAmount,
				currentMonthOil
			}
		}
	}
</script>

<style scoped>
	.home-container {
		padding: 20rpx;
		min-height: 100vh;
		background-color: #f8f8f8;
	}

	.loading-container {
		padding: 100rpx 0;
		display: flex;
		justify-content: center;
	}

	.empty-car {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 60vh;
	}

	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}

	.empty-text {
		font-size: 32rpx;
		color: #666;
		margin-bottom: 40rpx;
	}

	.add-car-btn {
		background-color: #7fbc8d;
		color: white;
		width: 60%;
		border-radius: 50rpx;
		font-size: 32rpx;
	}

	.car-card {
		background-color: white;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.car-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.car-name {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.car-plate {
		font-size: 28rpx;
		color: #666;
		margin-top: 8rpx;
	}

	.car-actions {
		display: flex;
		gap: 20rpx;
	}

	.car-stats {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.stat-item {
		flex: 1;
		text-align: center;
	}

	.stat-value {
		font-size: 40rpx;
		font-weight: bold;
		color: #7fbc8d;
		display: block;
	}

	.stat-label {
		font-size: 26rpx;
		color: #999;
		margin-top: 6rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.section-action {
		font-size: 26rpx;
		color: #7fbc8d;
	}

	.recent-record,
	.stats-card {
		background-color: white;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.record-details {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
	}

	.detail-item {
		margin-bottom: 20rpx;
	}

	.detail-label {
		font-size: 28rpx;
		color: #999;
	}

	.detail-value {
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
	}

	.no-record {
		text-align: center;
		padding: 40rpx;
		color: #999;
		font-size: 28rpx;
	}

	.stats-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
		margin-top: 20rpx;
	}

	.stat-block {
		background-color: #f9f9f9;
		border-radius: 12rpx;
		padding: 20rpx;
		text-align: center;
	}

	.stat-number {
		font-size: 36rpx;
		font-weight: bold;
		color: #7fbc8d;
		display: block;
	}

	.stat-desc {
		font-size: 26rpx;
		color: #999;
		margin-top: 6rpx;
	}

	.add-record-btn {
		position: fixed;
		right: 40rpx;
		bottom: 120rpx;
		background-color: #7fbc8d;
		color: white;
		border-radius: 50rpx;
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 4rpx 12rpx rgba(127, 188, 141, 0.3);
		z-index: 100;
	}

	.add-record-btn text {
		margin-left: 10rpx;
		font-size: 28rpx;
	}
</style>